<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-stepper v-model="n1"></pure-stepper>
        </a-demo>

        <a-demo title="设置最大/最小值" desc="最大10，最小-10">
            <pure-stepper v-model="n2" :min="-10" :max="10"></pure-stepper>
        </a-demo>

        <a-demo title="输入框可输入">
            <view class="title">默认不限制输入的是整数还是浮点数</view>
            <pure-stepper v-model="n3" :min="-10" :max="10" :disabledInput="false"></pure-stepper>

            <a-gap></a-gap>
            <a-gap></a-gap>
            <view class="title">限制只能输入整数</view>
            <pure-stepper v-model="n13" :min="-10" :max="10" :disabledInput="false" onlyInteger></pure-stepper>
        </a-demo>

        <a-demo title="步长" desc="步进0.1和0.01">
            <pure-stepper v-model="n4" :min="-10" :max="10" :step="0.1"></pure-stepper>
            <a-gap></a-gap>
            <pure-stepper v-model="n5" :min="-10" :max="10" :step="0.01"></pure-stepper>
        </a-demo>

        <a-demo title="禁用">
            <view class="title">整体禁用</view>
            <pure-stepper v-model="n6" disabled></pure-stepper>
            <a-gap></a-gap>
            <a-gap></a-gap>

            <view class="title">禁用减按钮，只能加不能减</view>
            <pure-stepper v-model="n7" disabledMinus></pure-stepper>
            <a-gap></a-gap>
            <a-gap></a-gap>

            <view class="title">禁用加按钮，只能减不能加</view>
            <pure-stepper v-model="n8" disabledPlus></pure-stepper>
        </a-demo>

        <a-demo title="隐藏">
            <view class="title">隐藏输入框</view>
            <pure-stepper v-model="n9" :showInput="false"></pure-stepper>
            <a-gap></a-gap>
            <a-gap></a-gap>

            <view class="title">隐藏减按钮</view>
            <pure-stepper v-model="n10" :showMinus="false"></pure-stepper>
            <a-gap></a-gap>
            <a-gap></a-gap>

            <view class="title">隐藏加按钮</view>
            <pure-stepper v-model="n11" :showPlus="false"></pure-stepper>
        </a-demo>

        <a-demo title="异步" desc="只对加减按钮生效，输入框输入事件不会触发">
            <pure-stepper v-model="n12" async @asyncChange="handleAsyncChange"></pure-stepper>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 值
    const n1 = ref(1);
    const n2 = ref(1);
    const n3 = ref(1);
    const n4 = ref(1);
    const n5 = ref(1);
    const n6 = ref(1);
    const n7 = ref(1);
    const n8 = ref(1);
    const n9 = ref(1);
    const n10 = ref(1);
    const n11 = ref(1);
    const n12 = ref(1);
    const n13 = ref(1);

    // 异步控制
    function handleAsyncChange(newNumber, oldNumber) {
        uni.showLoading({
            title: "正在更新数据",
            mask: true,
        });
        let timer = setTimeout(() => {
            uni.hideLoading();
            clearTimeout(timer);
            n12.value = newNumber;
        }, 2000);
    }
</script>

<style scoped>
    .title {
        margin-bottom: 8px;
    }
</style>
